<%@ page contentType="text/html; charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
	<head>
		<title>账号统计_登录</title>
		<meta name="decorator" content="default" />
		<script src="${ctxStatic}/echarts/echarts.js"></script>
	</head>
	<body>
		<div class="container-fluid">
			<!-- 导航 -->
			<div class="span12">
				<ul class="nav nav-tabs">
					<li class="active"><a>登录</a></li>
					<li><a>注册</a></li>
					<li><a>WAP留存</a></li>
				</ul>
			</div>
			<!-- 日期查询 -->
			<div class="span12">
				<form:form class="form-search">
					<label>开始时间:</label>
					<input id="beginDate" name="beginDate" type="text" readonly="readonly maxlength="20" 
					       class="input-medium Wdate" style="width:163px;"
					       onclick="WdatePicker({dateFmt:'yyyy-MM-dd'});" 
					 ></input>
					 ~
					<label>结束时间:</label>
					<input id="endDate" name="endDate" type="text" readonly="readonly maxlength="20" 
					       class="input-medium Wdate" style="width:163px;"
					       onclick="WdatePicker({dateFmt:'yyyy-MM-dd'});" 
					 ></input>
					 &nbsp;&nbsp;
					 <input id="btnSubmit" class="btn btn-primary" type="submit" value="查询" />
				</form:form>
			</div>
			<!-- 图表 -->
			<div class="span12">
				<div style="height:400px">
					<div id="chartLogin" style="height:400px"></div>
				</div>
			</div>
			<!-- 表格 -->
			<div class="span12">
				<table class="table table-bordered table-condensed">
					<thead>
					    <tr>
					    	<th>日期</th>
					     	<th>登录成功用户数</th>
					     	<th>登录成功次数</th>
					     	<th>登录提交次数</th>
					      	<th>登录成功率</th>
					    </tr>
					</thead>
					<tbody>		
						<c:forEach items="${statAccountLoginEntityList}" var="entity">
							<tr>
								<td>${entity.date}</td>
								<td>${entity.loginSuccessUserCnt}</td>
								<td>${entity.loginSuccessCnt}</td>
								<td>${entity.loginCnt}</td>
								<td><fmt:formatNumber value="${entity.loginSuccessRatio}" type="percent" maxFractionDigits="3"/></td>
							<tr>
						</c:forEach>
					</tbody>
				</table>
			</div>
			<!-- 图表 -->
			<div class="span12">
				<div class="row-fluid">
					</div>
						<div style="height:400px" class="span12">
						<div id="chartSource" style="height:400px"></div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			//为线图准备数据
			$(document).ready(function(){
				var dateList = []
				var loginSuccessUserCntList = []
				var loginSuccessCntList = []
				var loginCntList = []
				<c:forEach items="${statAccountLoginEntityList}" var="entity">
					dateList.push("${entity.date}")
					loginSuccessUserCntList.push("${entity.loginSuccessUserCnt}")
					loginSuccessCntList.push("${entity.loginSuccessCnt}")
					loginCntList.push("${entity.loginCnt}")
				</c:forEach>
		        // 路径配置
		        require.config({
		            paths: {
		                echarts: '${ctxStatic}/echarts/'
		            }
		        });
		        // Log表格
		        require(
		            [
		                'echarts',
		                'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
		            ],
		            function (ec) {
		                // 基于准备好的dom，初始化echarts图表
		                var chartLogin = ec.init(document.getElementById('chartLogin')); 
		                
		                option = {
	                	    title : {
	                	        text: '登录统计图',
	                	    },
	                	    tooltip : {
	                	        trigger: 'axis'
	                	    },
	                	    legend: {
	                	        data:['登录成功用户数','登录成功次数','登录提交次数']
	                	    },
	                	    calculable : true,
	                	    xAxis : [
	                	        {
	                	            type : 'category',
	                	            boundaryGap : false,
	                	            axisLabel:{
	                	            	interval:0,
	                	            	rotate:40
	                	            },
	                	            data : dateList
	                	        }
	                	    ],
	                	    yAxis : [
	                	        {
	                	            type : 'value',
	                	            axisLabel : {
	                	                formatter: '{value}'
	                	            }
	                	        }
	                	    ],
	                	    series : [
	                	        {
	                	            name:'登录成功用户数',
	                	            type:'line',
	                	            data: loginSuccessUserCntList
	                	        },
	                	        {
	                	            name:'登录成功次数',
	                	            type:'line',
	                	            data: loginSuccessCntList
	                	        },
	                	        {
	                	            name:'登录提交次数',
	                	            type:'line',
	                	            data: loginCntList
	                	        }
	                	    ]
	                	};
		        
		                // 为echarts对象加载数据 
		                chartLogin.setOption(option); 
		            }
		        );
		        
		        // 饼图
		        // 准备数据
				var gameNameList = []
				var gameCntList = []
				<c:forEach items="${StatAccountSourceEntityList}" var="entity">
					gameNameList.push("${entity.gameName}");
					gameCntList.push({name:"${entity.gameName}",value:"${entity.gameCnt}"});
				</c:forEach>
				console.log(gameCntList);
		        // Log表格
		        require(
		            [
		                'echarts',
		                'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
		            ],
		            function (ec) {
		                // 基于准备好的dom，初始化echarts图表
		                var chartSource = ec.init(document.getElementById('chartSource')); 
		                
		                option = {
		                	    title : {
		                	        text: '登录来源分布',
		                	        x:'center'
		                	    },
		                	    tooltip : {
		                	        trigger: 'item',
		                	        formatter: "{a} <br/>{b} : {c} ({d}%)"
		                	    },
		                	    legend: {
		                	        orient : 'vertical',
		                	        x : 'right',
		                	        data: gameNameList
		                	    },
		                	    calculable : true,
		                	    series : [
		                	        {
		                	            name:'访问来源',
		                	            type:'pie',
		                	            radius : '55%',
		                	            center: ['50%', '60%'],
		                	            data: gameCntList
		                	        }
		                	    ]
		                	};
		        
		                // 为echarts对象加载数据 
		                chartSource.setOption(option); 
		            }
		        );
			});
		</script>
	</body>
</html>